<template>
  <el-aside width="150px" class="fl">
    <el-col
      width="150px">
      <el-menu
        :default-active="indexs[active]"
        class="el-menu-vertical-demo"
        background-color="#f9f9f9"
        text-color="#808080"
        active-text-color="#ffd04b">
        <a @click="switchWin('#/province', '#/principal')">
          <el-menu-item index="1"  class="no_color">
            <p><img :src="src1 ? '../../static/assets/img/homepage1.png':'../../static/assets/img/homepage.png'" alt=""></p>
            <p slot="title">首页</p>
          </el-menu-item>
        </a>
        <a @click="switchWin('#/dynamic', '#/progessDetail')">
          <el-menu-item index="2">
            <p><img :src="src2 ? '../../static/assets/img/progress.png':'../../static/assets/img/progress1.png'" alt=""></p>
            <p slot="">建设进度</p>
          </el-menu-item>
        </a>
        <a @click="switchWin('#/homepage', '#/disease')">
          <el-menu-item index="3">
            <p><img :src="src3 ? '../../static/assets/img/ranking.png':'../../static/assets/img/ranking1.png'" alt=""></p>
            <p slot="title">数据质控</p>
          </el-menu-item>
        </a>
        <a @click="switchWin('#/supervision', '#/right_login')">
          <el-menu-item index="4">
            <p><img :src="src4 ? '../../static/assets/img/supervisor.png':'../../static/assets/img/supervisor1.png'" alt=""></p>
            <p slot="title">督导管理</p>
          </el-menu-item>
        </a>
        <a @click="switchWin('#/information', '#/right_login')">
          <el-menu-item index="5">
            <p><img :src="src5 ? '../../static/assets/img/fill.png':'../../static/assets/img/fill1.png'" alt=""></p>
            <p slot="title">填报信息</p>
          </el-menu-item>
        </a>
        <a @click="switchWin('#/reports', '#/right_login')">
          <el-menu-item index="6">
            <p><img :src="src6 ? '../../static/assets/img/report.png':'../../static/assets/img/report1.png'" alt=""></p>
            <p slot="title">智能报表</p>
          </el-menu-item>
        </a>
      </el-menu>
    </el-col>
  </el-aside>
</template>

<script>
export default {
  props: ['active','interval'],
  data () {
    return {
      indexs: ["","1","2","3","4","5","6"],
      src1: false,
      src2: true,
      src3: true,
      src4: true,
      src5: true,
      src6: true
    }
  },
  mounted () {
    if (this.active === 2) {
      this.src1 = true
      this.src2 = false
      this.src3 = true
      this.src4 = true
      this.src5 = true
      this.src6 = true
    } else if (this.active === 3) {
      this.src1 = true
      this.src2 = true
      this.src3 = false
      this.src4 = true
      this.src5 = true
      this.src6 = true
    } else if (this.active === 4) {
      this.src1 = true
      this.src2 = true
      this.src3 = true
      this.src4 = false
      this.src5 = true
      this.src6 = true
    } else if (this.active === 5) {
      this.src1 = true
      this.src2 = true
      this.src3 = true
      this.src4 = true
      this.src5 = false
      this.src6 = true
    } else if (this.active === 6) {
      this.src1 = true
      this.src2 = true
      this.src3 = true
      this.src4 = true
      this.src5 = true
      this.src6 = false
    } else {
      this.src1 = false
      this.src2 = true
      this.src3 = true
      this.src4 = true
      this.src5 = true
      this.src6 = true
    }
  },
  methods: {
    switchWin: function (url, page) {
      if(this.interval != null){
        clearInterval(this.interval)
      }
      
      window.location.href = url

      var ipcRenderer = window.require('electron').ipcRenderer
      ipcRenderer.send('switch-page', page)
    }
  }
}
</script>

<style scoped>
  .el-aside {
    background-color: #f9f9f9;
    color: #fff;
    text-align: center;
    line-height: 200px;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    -moz-box-shadow: rgb(167, 168, 169) 2px 0px 12px;/* 老的 Firefox */
    box-shadow: rgb(167, 168, 169) 2px 0px 12px;
  }
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  /*左侧导航的高度*/
  .el-menu {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .el-menu-item, .el-submenu__title{
    height:120px;
    line-height: 30px;
    padding-top: 20px;
  }
  /*导航选中状态*/
  li.el-menu-item.is-active {
    color:#0F86FC!important;
  }
  .el-menu-item[data-v-a6d97536], .el-submenu__title[data-v-a6d97536]{
    background-color:#F1EBE1!important;
    color:#808080!important;
  }
 .el-menu-item:hover, .el-menu-item:focus{
   background-color: rgb(249, 249, 249)!important;
  }
</style>
